<template>
	<view>
		<swiper indicator-dots="true" class="banner" indicator-color="rgba(255, 255, 255, .3)" indicator-active-color="rgba(217, 233, 194, 1)" autoplay="true">
			<swiper-item v-for="(img, key) in imgUrls" :key="key"><image :src="img" /></swiper-item>
		</swiper>
		
		<view class="headnav">
			<swiper class=" headnavcon" indicator-color="rgba(255, 255, 255, .3)" indicator-active-color="rgba(217, 233, 194, 1)"
			 autoplay="true" display-multiple-items="5">
				<swiper-item class="navlist">
					<image class="ch-top-navicon" src="../../../static/apiHL.png" mode></image><text class="ch-headnavfont">周边游</text>
				</swiper-item>
				<swiper-item class="navlist">
					<image class="ch-top-navicon" src="../../../static/componentHL.png" mode></image><text class="ch-headnavfont">美食</text>
				</swiper-item>
				<swiper-item class="navlist">
					<image class="ch-top-navicon" src="../../../static/extuiHL.png" mode></image><text class="ch-headnavfont">景点</text>
				</swiper-item>
				<swiper-item class="navlist">
					<image class="ch-top-navicon" src="../../../static/apiHL.png" mode></image><text class="ch-headnavfont">玩乐</text>
				</swiper-item>
				<swiper-item class="navlist">
					<image class="ch-top-navicon" src="../../../static/componentHL.png" mode></image><text class="ch-headnavfont">赏花踏青</text>
				</swiper-item>
			</swiper>
		</view>
		<view class="ch-card"  @tap="navigateTo">
			<view class="ch-bjimg" style="background-image:url(../../../static/shuijiao1.jpg);"></view>
			<view class="ch-title2">石家庄海悦天地海洋公园</view>
			<view class="ch-title3">360度体验鱼群从身边游过的感觉</view>
			<view class="ch-title3">2 推荐·2 评论</view>
			<view class="ch-userinfo2"><text class="ch-rel-face" style="background-image:url(../../../static/logo.png);"></text><text
				 class="ch-rel-username ">近朱者炽</text><text class="ch-rel-date ch-fr">1分钟前</text></view>
		</view>
		<view class="ch-card">
			<view class="ch-bjimg" style="background-image:url(../../../static/shuijiao2.jpg);"></view>
			<view class="ch-title2">石家庄海悦天地海洋公园</view>
			<view class="ch-title3">360度体验鱼群从身边游过的感觉</view>
			<view class="ch-title3">2 推荐·2 评论</view>
			<view class="ch-userinfo2"><text class="ch-rel-face" style="background-image:url(../../../static/logo.png);"></text><text
				 class="ch-rel-username ">近朱者炽</text><text class="ch-rel-date ch-fr">1分钟前</text></view>
		</view>
		<view class="ch-card">
			<view class="ch-userinfo"><text class="ch-rel-face" style="background-image:url(../../../static/logo.png);"></text><text
				 class="ch-rel-username">近朱者炽</text><text class="ch-rel-date ">1分钟前发布:</text></view>
			<view class="ch-bjimg" style="background-image:url(../../../static/shuijiao3.jpg);"></view>
			<view class="ch-title2">石家庄海悦天地海洋公园</view>
			<view class="ch-title3">360度体验鱼群从身边游过的感觉</view>
			<view class="ch-title3">2 推荐·2 评论</view>
		</view>
		<view class="ch-card">
			<view class="ch-userinfo"><text class="ch-rel-face" style="background-image:url(../../../static/logo.png);"></text><text
				 class="ch-rel-username">近朱者炽</text><text class="ch-rel-date ">1分钟前发布:</text></view>
			<view class="ch-bjimg" style="background-image:url(../../../static/shuijiao4.jpg);"></view>
			<view class="ch-title2">石家庄海悦天地海洋公园</view>
			<view class="ch-title3">360度体验鱼群从身边游过的感觉</view>
			<view class="ch-title3">2 推荐·2 评论</view>
		</view>
		<view class="ch-more">查看更多</view>
		<view class="ch-title ch-card-heng ch-card">推荐地点<text class="eosfont icondingwei  ch-posfr ch-title"></text></view>
		<view class="ch-card-heng">
			<view class="ch-fl ch-w-3-2">
				<view class="ch-title2">石家庄海悦天地海洋公园</view>
				<view class="ch-title3">360度体验鱼群从身边游过的感觉</view>
				<view class="ch-title3">2 推荐·2 评论</view>
			</view>
			<view class="ch-fr ch-w-3-1">
				<view class="ch-bjimg-heng" style="background-image:url(../../../static/shuijiao3.jpg);"></view>
				<view class="ch-badge-top-left">石家庄</view>
			</view>
			<view class="ch-userinfo2"><text class="ch-rel-face" style="background-image:url(../../../static/logo.png);"></text><text
				 class="ch-rel-username ">近朱者炽</text><text class="ch-rel-date ch-fr">1分钟前</text></view>
		</view>
		<view class="ch-card-heng">
			<view class="ch-fl ch-w-3-2">
				<view class="ch-title2">石家庄海悦天地海洋公园</view>
				<view class="ch-title3">360度体验鱼群从身边游过的感觉</view>
				<view class="ch-title3">2 推荐·2 评论</view>
			</view>
			<view class="ch-fr ch-w-3-1">
				<view class="ch-bjimg-heng" style="background-image:url(../../../static/shuijiao2.jpg);"></view>
				<view class="ch-badge-top-left">石家庄</view>
			</view>
			<view class="ch-clear"></view>
			<view class="ch-userinfo2"><text class="ch-rel-face" style="background-image:url(../../../static/logo.png);"></text><text
				 class="ch-rel-username ">近朱者炽</text><text class="ch-rel-date ch-fr">1分钟前</text></view>
		</view>
		<view class="ch-more">查看更多</view>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				indicatorcolor: "rgba(255, 255, 255, .3)",
				showSwiper: false,
				imgUrls: [
					'../../../static/shuijiao3.jpg',
					'../../../static/shuijiao2.jpg'
				],

			};
		},
		methods: {
			 navigateTo() {
			 	uni.navigateTo({
			 		url: '../../component/langji_view/langji_view'
			 	})
			 }
		}
		 
		

	};
</script>

<style>
image,
swiper,
.img-view {
	width: 750upx;
	height: 500upx;
}
/* 首页广告图 */
.banner{ border-bottom-right-radius:10% ; border-bottom-left-radius: 10%; overflow: hidden; height: 400upx;}
.headnav{ overflow: hidden; position:relative; z-index: 2; margin-left: 30upx; margin-right: 30upx;  background: #fff; height: 150upx; border-radius: 20upx;
  -webkit-box-shadow:0upx 6upx 14upx #e6e6e6;
          box-shadow:0upx 6upx 14upx #e6e6e6; top:-80upx; margin-bottom: -80upx;/* display: none; */  text-align: center;}
.headnavcon{height: 150upx; width: 100%;}
.navlist{
}
.navlist .ch-headnavfont{ color:#222222; font-size: 24upx;}
.ch-top-navicon{ width: 70upx; height:70upx; margin: 0 auto;   color: #fff; border-radius: 30%;  display: block; margin-top: 15upx;}
 
 
</style>
